<template>
  <div class="edit_index">
    <el-row class="edit_pc hidden-xs-only">
      <h1>
        <p class="cname">中英智慧教育学生测评系统</p>
        <!-- <p class="uname">EduTech China student evaluation system</p> -->
      </h1>
      <div class="loginform">
        <img
          style="position: absolute;right:-51px;top:-39px;z-index:1;"
          src="@/assets/images/login/rocket.png"
          alt
        />
        <div class="formleft">
          <img src="@/assets/images/login/logo.png" alt style="width:90%"/>
          <img style="margin-top:70px" src="@/assets/images/login/s_login.png" alt />
        </div>
        <div class="formright">
          <p v-if="type==1" class="title">
            绑定手机
            <img src="@/assets/images/login/tright.png" alt />
          </p>
          <p v-if="type==2" class="title">
            忘记密码
            <img src="@/assets/images/login/tright.png" alt />
          </p>
          <div v-if="type==1">
            <div class="name box">
              <img src="@/assets/images/login/phone.png" alt />
              <el-input v-model="tel" placeholder="请输入手机号" maxlength='11'></el-input>
            </div>
            
            <div class="password box">
              <img src="@/assets/images/login/password.png" alt />
              <el-input type="password" v-model="password" placeholder="请输入6-16位密码" maxlength="16"></el-input>
            </div>
            <div class="password box">
              <img src="@/assets/images/login/password.png" alt />
              <el-input type="password" v-model="affirmpassword" placeholder="请确认输入6-16位密码" maxlength="16"></el-input>
            </div>
            <div class="code">
              <div class="box" style="width:348px;">
                <img src="@/assets/images/login/yam.png" alt />
                <el-input v-model="telcode" placeholder="请输入验证码" maxlength="20"></el-input>
              </div>
              <el-button class="getcode" :loading="loading" @click="sendCodeForStudent(1)">{{code}}</el-button>
            </div>
            <div class="btn_login" @click="bingphone()">登录</div>
          </div>
          <div v-if="type==2">
            <div class="name box">
              <img src="@/assets/images/login/phone.png" alt />
              <el-input v-model="tel" placeholder="请输入手机号" maxlength='11'></el-input>
            </div>
            
            <div class="password box">
              <img src="@/assets/images/login/password.png" alt />
              <el-input type="password" v-model="password" placeholder="请输入6-16位密码" maxlength="16"></el-input>
            </div>
            <div class="password box">
              <img src="@/assets/images/login/password.png" alt />
              <el-input type="password" v-model="affirmpassword" placeholder="请确认输入6-16位密码" maxlength="16"></el-input>
            </div>
            <div class="code">
              <div class="box" style="width:348px;">
                <img src="@/assets/images/login/yam.png" alt />
                <el-input v-model="telcode" placeholder="请输入验证码" maxlength="20"></el-input>
              </div>
              <el-button
                v-if="person=='student'"
                class="getcode"
                :loading="loading"
                @click="sendCodeForStudent(2)"
              >{{code}}</el-button>
              <el-button
                v-else-if="person=='teacher'"
                class="getcode"
                :loading="loading"
                @click="sendCodeForTeacher(2)"
              >{{code}}</el-button>
            </div>
            <div class="btn_login" @click="findPhone()">确认</div>
          </div>
        </div>
      </div>
    </el-row>
    <el-row class="edit_wap hidden-sm-and-up">
      <div class="headerbg">
        <p v-if="type==1">绑定手机</p>
        <p v-if="type==2">
          忘记密码
          <img @click="historyBack" class="arrow" src="@/assets/images/login/arrow.png" alt="">
        </p>
        <img class="bg" src="@/assets/images/login/waplogin.png" alt />
      </div>
      <div v-if="type==1" class="loginbox">
        <div style="margin-top: 0.9rem;">
          <div class="name box">
            <img src="@/assets/images/login/phone.png" alt />
            <el-input v-model="tel" placeholder="请输入手机号" maxlength='11'></el-input>
          </div>
          
          <div class="password box">
            <img src="@/assets/images/login/password.png" alt />
            <el-input type="password" v-model="password" placeholder="请输入6-16位密码" maxlength="16"></el-input>
          </div>
          <div class="password box">
            <img src="@/assets/images/login/password.png" alt />
            <el-input type="password" v-model="affirmpassword" placeholder="请确认输入6-16位密码" maxlength="16"></el-input>
          </div>
          <div class="code">
            <div class="box" style="width:4.2rem;">
              <img src="@/assets/images/login/yam.png" alt />
              <el-input v-model="telcode" placeholder="请输入验证码" maxlength="20"></el-input>
            </div>
            <el-button class="getcode" :loading="loading" @click="sendCodeForStudent(1)">{{code}}</el-button>
          </div>
          <div class="btn_login" @click="bingphone()">登录</div>
        </div>
      </div>
      <div v-if="type==2" class="loginbox">
        <div style="margin-top: 0.9rem;">
          <div class="name box">
            <img src="@/assets/images/login/phone.png" alt />
            <el-input v-model="tel" placeholder="请输入手机号" maxlength='11'></el-input>
          </div>
          
          <div class="password box" style="margin-top: 0.54rem;">
            <img src="@/assets/images/login/password.png" alt />
            <el-input type="password" v-model="password" placeholder="请输入6-16位密码" maxlength="16"></el-input>
          </div>
          <div class="password box">
            <img src="@/assets/images/login/password.png" alt />
            <el-input type="password" v-model="affirmpassword" placeholder="请确认输入6-16位密码" maxlength="16"></el-input>
          </div>
          <div class="code">
            <div class="box" style="width:4.2rem;">
              <img src="@/assets/images/login/yam.png" alt />
              <el-input v-model="telcode" placeholder="请输入验证码" maxlength="20"></el-input>
            </div>
            <!-- <el-button class="getcode" :loading="loading" @click="sendCodeForStudent(2)">{{code}}</el-button> -->
            <el-button
                v-if="person=='student'"
                class="getcode"
                :loading="loading"
                @click="sendCodeForStudent(2)"
              >{{code}}</el-button>
              <el-button
                v-else-if="person=='teacher'"
                class="getcode"
                :loading="loading"
                @click="sendCodeForTeacher(2)"
              >{{code}}</el-button>
          </div>
          <div class="btn_login" @click="findPhone()">确认</div>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
/**
 * 忘记密码-绑定手机号
 */
export default {
  name: "Index",
  data() {
    return {
      type: this.$route.query.type, //登陆 1手机号登陆 2身份证号登录
      person: this.$route.query.person, // 老师teacher 学生student
      card_id: "", //身份证号
      sname: "", //学生姓名
      tel: "", //学生登录手机号
      password: "", //密码
      affirmpassword: "", //确认密码
      telcode: "", //手机验证码
      loading: false,
      code: "获取验证码"
    };
  },
  mounted() {
    // if (!this.person) {
    //   this.$message({
    //     offset: "400",
    //     message: "请绑定常用手机号，以便接收成绩。",
    //     showClose: true
    //   });
    // }
  },
  methods: {
    // 返回上一页
    historyBack(){
      history.go(-1)
    },
    //绑定手机号
    bingphone() {
      if(!this.tel){
        this.$message({
          offset: "400",
          message: "请输入手机号码",
          showClose: true
        });
        return false;
      }
      if(!this.telcode){
        this.$message({
          offset: "400",
          message: "请输入验证码",
          showClose: true
        });
        return false;
      }
      if(!this.password){
        this.$message({
          offset: "400",
          message: "请输入密码",
          showClose: true
        });
        return false;
      }
      if(this.password.length<6){
        this.$message({
          offset: "400",
          message: "请输入6-16位密码",
          showClose: true
        });
        return false;
      }
      if(!this.affirmpassword){
        this.$message({
          offset: "400",
          message: "请输入密码",
          showClose: true
        });
        return false;
      }
      if(this.affirmpassword.length<6){
        this.$message({
          offset: "400",
          message: "请确认输入6-16位密码",
          showClose: true
        });
        return false;
      }
      if (this.affirmpassword != this.password) {
        this.$message({
          offset: "400",
          message: "两次密码不一致",
          showClose: true
        });
        return false;
      }
      this.$api
        .post("/student/bind", {
          phone: this.tel,
          password: this.password,
          password_confirmation: this.affirmpassword,
          code: this.telcode
        })
        .then(res => {
          if (res.data.code == 1) {
            // localStorage.setItem("FL_TOKEN", res.data.data.token);
            // localStorage.setItem("FL_login", "");
            // this.$router.push({ name: "Student" });
            this.$msgbox({
              confirmButtonClass: "msgbox-btn-long",
              message:
                "您已成功登陆中英智慧教育学生评测系统，请确保您填写的信息准确无误，以便成绩的准确，谢谢您的配合!",
              confirmButtonText: "我确保填写的信息真实可靠",
              callback: (action, instance) => {
                if (action === "confirm") {
                  this.$msgbox({
                    customClass: "msgbox-content-long",
                    confirmButtonClass: "msgbox-btn-long",
                    title: "填写须知",
                    message: `1、填写流程<br>1.1、进入学生自评表填写页面后，请依据真实情况进行填写，确认填报内容准确无误后点击提交按钮。<br>1.2、提交学生自评表后将会自动跳转至学生互评表页面，请先选择活动名称，再依据真实情况对该个活动中的小组成员进行打分和评价。（注：活动内容根据下拉菜单进行选择，请确保对所有活动内容进行了评价。）<br>1.3、填写完学生互评表后，点击提交按钮，根据提示时间，等待学生成绩的产生。<br>2、填写内容须知<br>2.1、此次评测填写内容用于生成学生综合能力的测评报告，请确保本报告填报的内容依据真实有效。<br>2.2、请确保个人账户的安全，不对外泄露自己的账号和密码。<br>2.3、本公司拥有客户填写的信息的使用权和生产的评测报告的归属权。`,
                    confirmButtonText:
                      "我已仔细阅读过上述内容，确认填写内容真实可靠",
                    dangerouslyUseHTMLString: true,
                    callback: (action, instance) => {
                      if (action === "confirm") {
                        // this.$router.push({ name: "StudentLogin" });
                        
                        this.$router.push({ name: "Student" });
                      }
                    }
                  });
                }
              }
            });
          } else {
            this.$message({
              offset: "400",
              message: res.data.message,
              showClose: true
            });
          }
        });
    },
    //找回密码
    findPhone() {
      if(!this.tel){
        this.$message({
          offset: "400",
          message: "请输入手机号码",
          showClose: true
        });
        return false;
      }
      if(!this.telcode){
        this.$message({
          offset: "400",
          message: "请输入验证码",
          showClose: true
        });
        return false;
      }
      if(!this.password){
        this.$message({
          offset: "400",
          message: "请输入密码",
          showClose: true
        });
        return false;
      }
      if(this.password.length<6){
        this.$message({
          offset: "400",
          message: "请输入6-16位密码",
          showClose: true
        });
        return false;
      }
      if(!this.affirmpassword){
        this.$message({
          offset: "400",
          message: "请输入密码",
          showClose: true
        });
        return false;
      }
      if(this.affirmpassword.length<6){
        this.$message({
          offset: "400",
          message: "请确认输入6-16位密码",
          showClose: true
        });
        return false;
      }
      if (this.affirmpassword != this.password) {
        this.$message({
          offset: "400",
          message: "两次密码不一致",
          showClose: true
        });
        return false;
      }
      this.$api
        .post("/auth/retrieve", {
          _scene:
            this.person == "student" ? "student.retrieve" : "teacher.retrieve",
          phone: this.tel,
          password: this.password,
          password_confirmation: this.affirmpassword,
          code: this.telcode
        })
        .then(res => {
          if (res.data.code == 1) {
            if (this.person == "student") {
              this.$router.push({ name: "StudentLogin" });
            } else {
              this.$router.push({ name: "Index" });
            }
          } else {
            this.$message({
              offset: "400",
              message: res.data.message,
              showClose: true
            });
          }
        });
    },
    //发送验证码
    sendCodeForTeacher(type) {
      if (!this.tel) {
        this.$message({
          offset: "400",
          message: "请输入手机号",
          showClose: true
        });
        return false;
      }
      if(!this.password){
        this.$message({
          offset: "400",
          message: "请输入密码",
          showClose: true
        });
        return false;
      }
      if(this.password.length<6){
        this.$message({
          offset: "400",
          message: "请输入6-16位密码",
          showClose: true
        });
        return false;
      }
      if(!this.affirmpassword){
        this.$message({
          offset: "400",
          message: "请输入密码",
          showClose: true
        });
        return false;
      }
      if(this.affirmpassword.length<6){
        this.$message({
          offset: "400",
          message: "请确认输入6-16位密码",
          showClose: true
        });
        return false;
      }
      if (this.affirmpassword != this.password) {
        this.$message({
          offset: "400",
          message: "两次密码不一致",
          showClose: true
        });
        return false;
      }
      this.$api
        .post("/common/code", {
          _scene: "teacher.retrieve",
          phone: this.tel
        })
        .then(res => {
          if (res.data.code == 1) {
            this.$message({
              offset: "400",
              message: res.data.message,
              showClose: true,
              type: "success"
            });
            this.code = 120;
            var codetime = setInterval(() => {
              this.loading = true;
              this.code--;
              if (this.code <= 0) {
                this.loading = false;
                this.code = "获取验证码";
                clearInterval(codetime);
              }
            }, 1000);
          } else {
            this.$message({
              offset: "400",
              message: res.data.message,
              showClose: true
            });
          }
        });
    },
    //发送验证码
    sendCodeForStudent(type) {
      if (!this.tel) {
        this.$message({
          offset: "400",
          message: "请输入手机号",
          showClose: true
        });
        return false;
      }
      if(!this.password){
        this.$message({
          offset: "400",
          message: "请输入密码",
          showClose: true
        });
        return false;
      }
      if(this.password.length<6){
        this.$message({
          offset: "400",
          message: "请输入6-16位密码",
          showClose: true
        });
        return false;
      }
      if(!this.affirmpassword){
        this.$message({
          offset: "400",
          message: "请输入密码",
          showClose: true
        });
        return false;
      }
      if(this.affirmpassword.length<6){
        this.$message({
          offset: "400",
          message: "请确认输入6-16位密码",
          showClose: true
        });
        return false;
      }
      if (this.affirmpassword != this.password) {
        this.$message({
          offset: "400",
          message: "两次密码不一致",
          showClose: true
        });
        return false;
      }
      this.$api
        .post("/common/code", {
          _scene: type == 1 ? "student.common.code" : "student.retrieve",
          phone: this.tel
        })
        .then(res => {
          console.log(res.data.code)
          if (res.data.code == 1) {
            this.$message({
              offset: "400",
              message: res.data.message,
              showClose: true,
              type: "success"
            });
            this.code = 120;
            var codetime = setInterval(() => {
              this.loading = true;
              this.code--;
              if (this.code <= 0) {
                this.loading = false;
                this.code = "获取验证码";
                clearInterval(codetime);
              }
            }, 1000);
          } else {
            this.$message({
              offset: "400",
              message: res.data.message,
              showClose: true
            });
          }
        });
    }
  },
  created() {
    console.log(this.$route.query.type);
  }
};
</script>

<style lang="less">
.msgbox-content-long {
  width: 8rem !important;
}
.msgbox-btn-long {
  width: auto !important;
  padding: 0 20px;
}
.edit_index {
  .edit_pc {
    background: url("../../assets/images/login/loginbg.png") no-repeat center;
    background-size: 100% 100%;
    height: 100vh;
    position: relative;
    h1 {
      padding-top: 41px;
      padding-left: 68px;
      .cname {
        width: 583px;
        text-align: justify;
        text-align-last: justify;
        font-size: 48px;
        font-weight: bold;
        font-family: PingFang SC;
        color: rgba(255, 255, 255, 1);
      }
      .uname {
        width: 583px;
        text-align: justify;
        text-align-last: justify;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
      }
    }
    .loginform {
      width: 1013px;
      height: 704px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 6px 95px 0px rgba(0, 0, 0, 0.21);
      border-radius: 30px;
      margin: 0 auto;
      margin-top: 106px;
      position: relative;
      box-sizing: border-box;
      padding: 34px 45px;
      .formleft {
        width: 381px;
        float: left;
      }
      .formright {
        float: right;
        width: 483px;
        text-align: center;
        .title {
          font-size: 30px;
          margin-top: 46px;
          margin-bottom: 55px;
        }
        .box {
          display: flex;
          width: 483px;
          height: 60px;
          background: rgba(248, 248, 248, 1);
          align-items: center;
          margin-bottom: 24px;
          img {
            width: 25px;
            height: 30px;
            margin-left: 20px;
          }
          input {
            border: none !important;
            background: rgba(248, 248, 248, 1) !important;
          }
        }
        .code {
          display: flex;
          .getcode {
            padding: 0;
            color: #262f73;
            font-size: 22px;
            height: 60px;
            width: 132px;
            text-align: center;
            border-color: #262f72;
            &:hover {
              color: #262f73;
            }
          }
        }
        .btn_login {
          margin-top: 43px;
          color: white;
          font-size: 30px;
          font-weight: 400;
          text-align: center;
          line-height: 80px;
          width: 500px;
          height: 87px;
          background: url("../../assets/images/login/loginbtn.png") no-repeat
            center;
          background-size: 100% 100%;
        }
      }
    }
  }
  .edit_wap {
    position: relative;
    .headerbg {
      overflow: hidden;
      p {
        line-height: 40px;
        position: absolute;
        font-size: 20px;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        width: 100%;
      }
      img {
        &.bg{
          width: 100%;
        }
        &.arrow{
          position: absolute;
          top: 2px;
          left: 0;
          width: 14px;
          height: 15px;
          padding: 10px;
        }
      }
    }
    .loginbox {
      position: relative;
      margin: -1.2rem auto;
      width: 6.65rem;
      box-shadow: 0px 6px 95px 0px rgba(0, 0, 0, 0.21);
      background: white;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 0.24rem 0.32rem 0.4rem;
      .logo {
        width: 1.9rem;
        img {
          width: 100%;
        }
      }
      .logintype {
        font-size: 0.36rem;
        font-weight: bold;
        display: flex;
        justify-content: space-around;
        .mcolor {
          color: #253172;
        }
      }
    }
    .code {
      display: flex;
      .box {
        margin-bottom: 0;
      }

      .getcode {
        width: 2rem;
        padding: 0 !important;
        color: #262f73;
        font-size: 0.22rem;
        text-align: center;
        border-color: #262f72;
      }
    }
    .box {
      display: flex;
      width: 6rem;
      align-items: center;
      margin-bottom: 0.54rem;
      border-bottom: 1px solid #dbdbdb;
      img {
        width: 0.31rem;
        height: 0.34rem;
        margin-left: 20px;
      }
      input {
        border: none !important;
        background: #fff !important;
      }
    }
    .btn_login {
      margin: 0.8rem auto 0;
      width: 4.83rem;
      height: 0.7rem;
      line-height: 0.7rem;
      background: rgba(37, 49, 114, 1);
      box-shadow: 0px 6px 9px 0px rgba(26, 57, 179, 0.32);
      border-radius: 35px;
      text-align: center;
      font-size: 0.3rem;
      color: #fff;
    }
  }
}
.el-message-box{
  width: 5.56rem !important;
}
.el-message-box .el-message-box__btns .el-button--primary{
  background: rgba(38, 49, 115, 1) !important;
}
.msgbox-content-long{
  width: 7.5rem !important;
}
</style>
